<template>
  <view class="user-comment-list">
    <new-year-task-pop ref="newYearTask"></new-year-task-pop>
    <view style="position: fixed;z-index: 101">
      <preview ref="preview" style="z-index: 100"></preview>
    </view>
    <view class="class-msg">
      <view class="text1">评论</view>
      <view class="class-msg-xian"></view>
    </view>
    <view class="user-comment-item" v-for="(item,index) in list" :key="item.id">
      <view class="comment-user-info">
        <view class="user-image">
          <image :src="item.avatar"></image>
        </view>
        <view class="user-username">
          <view>{{ item.nickName || item.name }}</view>
          <view class="user-badge">
            <daren :type="1" v-if="item.commentLevel>0" :index="item.commentLevel"></daren>
            <daren :type="2" v-if="item.shineLevel>0" :index="item.shineLevel"></daren>
          </view>
          <view v-if="item.owerFlag" class="edit" @click.stop="edit(item,index)">修改</view>
        </view>
      </view>
      <view class="comment-text-box">
        <view class="comment-desc">
          <text style="word-break: break-all;">{{ item.content }}</text>
        </view>
        <view class="image-list" v-if="item.picUrl">
          <view class="image-item" v-for="(imageItem,imageIndex) in JSON.parse(item.picUrl)" :key="imageIndex"
                @click.stop="$refs.preview.init(imageIndex,JSON.parse(item.picUrl))">
            <image mode="aspectFill" v-if="imageItem.fileType==='image'" class="image"
                   :src="imageItem.url"></image>
            <image mode="aspectFill" v-if="imageItem.fileType==='video'" class="image"
                   :src="imageItem.thumbUrl"></image>
            <view class="video-play" v-if="imageItem.fileType==='video'">
              <image :src="image_hosts+'icon_play.png'"></image>
            </view>
          </view>
        </view>
        <view class="comment-set">
          <view class="comment-date">{{ item.createTime }}
            <!--                  <text @click="delV(item,index)" v-if="item.isOwner===1" class="del">删除</text>-->
          </view>
          <view class="comment-give-the-thumbs-up button-item-active" @click="like(item,index)">
            <image v-if="item.likeFlag" :src="image_hosts+'dianzan1.png'"></image>
            <image v-else :src="image_hosts+'dianzan2.png'"></image>
            <text>{{ item.praiseNum > 99 ? '99+' : item.praiseNum }}</text>
          </view>
        </view>
      </view>
    </view>
    <view style="width: 100%;height: 200rpx;"></view>
    <view :class="isShow?'user-comment-show':''" :style="bottomVal!==''?bottomVal:''"
          class="user-comment-input user-comment-input-fixed">
      <!--          输入框-->
      <view class="input-box">
        <view v-show="text.length===0" class="icon">
          <image :src="image_hosts+'message-icon.png'"></image>
        </view>
        <view class="textarea-box">
              <textarea ref="textarea" :show-confirm-bar="false" maxlength="100000" :confirm-type="'send'"
                        v-model="text"
                        :focus="focus"
                        @keyboardheightchange="keyboardheightchange($event)" :adjust-position="false"
                        placeholder="随便说两句..." auto-height></textarea>
        </view>
      </view>
      <!--          发送按钮-->
      <view class="button-box" :style="text.length>0 || bottomVal!==''?'height: auto;':''">
        <view class="icon" @click="uploadFile">
          <uni-icons type="image" size="50"></uni-icons>
        </view>
        <view class="send" @click="sendMessage">发送</view>
      </view>
      <!--          图片展示-->
      <view class="update-box" v-if="uploadList.length!==0">
        <view class="update-list">
          <view class="update-item" v-for="(item,index) in uploadList">
            <image mode="aspectFill" v-if="item.fileType==='image'" class="image"
                   :src="item.url"></image>
            <image mode="aspectFill" v-if="item.fileType==='video'" class="image"
                   :src="item.thumbUrl"></image>
            <view class="video-play" v-if="item.fileType==='video'">
              <image :src="image_hosts+'icon_play.png'"></image>
            </view>
            <view class="del" @click="delImg(index)">
              <uni-icons type="closeempty" color="#fff"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import AnswerLoading from "@/pages/newAnswer/components/answer-loading.vue";
import {uploadFile2} from "@/common/uploadCOS";
import daren from "@/pages/circle/components/daren.vue";
import preview from "@/pages/circle/components/preview.vue";
import NewYearTaskPop from "@/components/new-year-task-pop/new-year-task-pop.vue";

export default {
  components: {NewYearTaskPop, preview, daren, AnswerLoading},
  props: ['type'],
  data() {
    return {
      image_hosts: this.image_host + 'quanzi/',
      bottomVal: "",
      text: "",
      isShow: false,
      commentBoxShow: false,
      videoInfo: {},
      FormData: {
        page: 1,
        pageSize: 10,
        sayId: 0,
        commentId: "",
        lastId: 0
      },
      total: 0,
      list: [],
      picUrl: "",
      uploadList: [],
      editInfoId: null,
      editInfoIndex: '',
      focus: false,
      isGetList: true
    };
  },
  methods: {
    /**
     * 显示评论窗口
     * @param item
     */
    show(item) {
      this.FormData.sayId = item.id
      this.FormData.commentId = item.commentId
      this.commentBoxShow = true;
      if (this.type === 'detail') {
        this.isShow = true
      }
      this.FormData.page = 1
      this.getList()
      this.$nextTick(() => {
        this.isShow = true
      })
    },
    /**
     * 隐藏评论窗口
     */
    hide() {
      this.isShow = false
      setTimeout(() => {
        this.commentBoxShow = false;
        this.$emit("commentHide", this.total)
      }, 300)
    },
    /**
     * 检测，虚拟键盘高度
     * @param e
     */
    keyboardheightchange(e) {
      let height = e.detail.height
      if (height > 0) {
        this.bottomVal = `bottom: ${e.detail.height}px;`
        this.focus = true
      } else {
        this.bottomVal = ""
        this.focus = false
      }
      this.$emit('setZhezhao', this.bottomVal)
    },
    /**
     * 获取评论列表接口
     * @returns {Promise<void>}
     */
    async getList() {
      let data = this.FormData;
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/say/getCommentListBySayId', data, 'json')
      this.list = data.page === 1 ? [].concat(res.data.data.list) : this.list.concat(res.data.data.list)
      this.total = res.data.data.total;
      this.FormData.lastId = this.list[this.list.length - 1].id;
      this.isGetList = true
    },
    /**
     *
     * @returns {Promise<void>} 发送评论消息
     */
    async sendMessage() {
      let data = {
        picUrl: JSON.stringify(this.uploadList.map(item => {
          return {fileType: item.fileType, url: item.url, thumbUrl: item.thumbUrl}
        })),
        content: this.text,
        sayId: this.FormData.sayId,
        commentId: this.editInfoId,
        from: uni.getStorageSync('taskId') === 2 ? 'task' : ''
      }
      let res = await this.$javaCircle.doRequest("post", 'circle/customer/say/sendSayComment', data, 'json', true)
      if (res.data.code === 0) {
        uni.showToast({title: res.data.message, icon: "none"})
        this.text = "";
        this.uploadList = []
        if (!this.editInfoId) {
          this.list = [res.data.data].concat(this.list)
          this.total++
        } else {
          this.list[this.editInfoIndex].picUrl = data.picUrl
          this.list[this.editInfoIndex].content = data.content
        }
        this.editInfoId = null
        this.editInfoIndex = ''
        uni.setStorageSync("taskId", false)
        this.$emit("setCommentNum", this.total)
        if (data.from === 'task') {
          await this.$refs.newYearTask.show()
        }
      } else {
        this.text = "";
        this.uploadList = []
      }

    },
    /**
     *
     * @param item 当前选择的数据
     * @param index 当前选择数据的下标
     * @returns {Promise<void>} 请求后端点赞，取消点赞接口
     */
    async like(item, index) {
      let data = {
        id: item.id
      }
      let url = !item.likeFlag ? 'circle/customer/say/sayCommentLike' : 'circle/customer/say/sayCommentCancelLike'
      let res = await this.$javaCircle.doRequest("get", url, data, 'json')
      if (res.data.code !== 0) {
        uni.showToast({title: res.data.message, icon: "none"})
        return
      }
      this.list[index].praiseNum += item.likeFlag ? -1 : 1
      this.list[index].likeFlag = !item.likeFlag
    },
    /**
     * 提示是否删除评论
     * @param item
     * @param index
     */
    delV(item, index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确定要删除这条评论吗？",
        success: function (e) {
          if (e.confirm) {
            _this.del(item, index)
          }
        }
      })
    },
    /**
     * 删除评论
     * @param item
     * @param index
     * @returns {Promise<void>}
     */
    async del(item, index) {
      let data = {
        commentId: item.id,
        videoId: item.videoId
      }
      let url = 'vs/video/comment/delComment';
      let res = await this.$javaCircle.doRequest("post", url + '?commentId=' + data.commentId + '&videoId=' + data.videoId, {}, 'json')
      if (res.data.code !== 0) {
        if (res.data.code !== 0) {
          uni.showToast({title: res.data.message, icon: "none"})
          return
        }
      }
      this.list.splice(index, 1)
      this.total--
    },
    end() {
      if (this.total > this.FormData.page * this.FormData.pageSize && this.isGetList) {
        this.isGetList = false
        this.FormData.page++;
        this.getList()
      }
    },
    uploadFile() {
      uni.chooseMedia({
        count: 9, // 最多选择的文件数量
        mediaType: ['image', 'video'], // 文件选择的类型，可以是图片、视频
        sourceType: ['album', 'camera'], // 文件选择的来源，可以是相册、相机
        success: (res) => {
          let list = res.tempFiles.map(item => {
            return {
              tempFilePath: item.tempFilePath,
              thumbTempFilePath: item.thumbTempFilePath,
              size: item.size,
              fileType: item.fileType,
              type: 0,//0 未上传，1上传中，2上传成功，3上传失败
              url: "",
              thumbUrl: "",
              progress: 0
            }
          })
          this.uploadList = this.uploadList.concat(list)
          this.uploadListOnChange(this.uploadList)
        }
      })
    },
    // 上传附件
    uploadListOnChange(list) {
      list.forEach((item, index) => {
        if (item.type === 0) {
          // 上传附件
          this.uploadList[index].type = 1
          let filename = item.tempFilePath.substr(item.tempFilePath.lastIndexOf('/') + 1);
          uploadFile2(item.tempFilePath, filename, item.size, progress => {
            this.uploadList[index].progress = parseInt(progress.percent * 100)
          }, false).then(res => {
            this.uploadList[index].type = 2
            this.uploadList[index].url = 'https://' + res.Location.replace("cos.ap-nanjing", "file");
          })
          if (!item.thumbTempFilePath) {
            return
          }
          // 上传视频第一针
          let filename1 = item.thumbTempFilePath.substr(item.thumbTempFilePath.lastIndexOf('/') + 1);
          uploadFile2(item.thumbTempFilePath, filename1, item.size, progress => {

          }, false).then(res => {
            this.uploadList[index].thumbUrl = 'https://' + res.Location.replace("cos.ap-nanjing", "file");
          })
        }
      })
    },
    delImg(index) {
      uni.showModal({
        title: "提示",
        content: "确定要删除吗？",
        success: (e) => {
          if (e.confirm) {
            this.uploadList.splice(index, 1)
          }
        }
      })

    },
    edit(item, index) {
      console.log(item);
      this.editInfoId = item.id
      this.editInfoIndex = index
      this.text = item.content
      if (item.picUrl) {
        this.uploadList = JSON.parse(item.picUrl).map(item => {
          item.type = 2;
          return item;
        })
      }
    },
    setTextareaFocus() {
      this.focus = false
      this.$nextTick(() => {
        this.focus = true
      })

    }
  },
}
</script>

<style lang="scss" scoped>
.comment-box {
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: all .3s linear;
}

.comment-box-show {
  background-color: rgba(0, 0, 0, .4);
}

.comment-list {
  width: 100%;
  background-color: #fff;
  border-radius: 20upx 20upx 0 0;
  position: absolute;
  bottom: -80%;
  left: 0;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  transition: all .3s cubic-bezier(1, -0.15, 1, 1);
}


.comment-list-show {
  bottom: 0;
}

.comment-title {
  width: 100%;
  height: 108upx;
  box-sizing: border-box;
  padding: 0 30upx;
  line-height: 108upx;
  font-size: 38upx;
  color: #666666;
  text-align: end;
  border-bottom: 1upx solid #D8D8D8;
}

.user-comment-list {
  height: auto;
  box-sizing: border-box;
  padding-top: 30upx;
}

.user-comment-input {
  width: 100%;
  min-height: 108upx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 12upx 30upx;
  align-items: center;
  border-top: 1upx solid #D8D8D8;
  display: none;
  transition: opacity .3s linear;
  opacity: 0;
}

.user-comment-show {
  display: flex;
  flex-direction: column;
  opacity: 1;
}

.user-comment-input .textarea-box {
  flex: 1;
  background-color: #F3F3F5;
  border-radius: 20upx;
  font-size: 38upx;
  box-sizing: border-box;
  padding: 25upx 30upx;
}

.user-comment-input .textarea-box textarea {
  width: 100%;
  font-size: 38upx;
}

.user-comment-item {
  box-sizing: border-box;
  padding: 25upx 30upx 0 30upx;

}

.comment-user-info {
  width: 100%;
  display: flex;
  align-items: center;
}

.user-image {
  width: 70upx;
  height: 70upx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20upx;
  background-color: #3F536E;
}

.user-image image {
  width: 100%;
  height: 100%;
}

.comment-text-box {
  box-sizing: border-box;
  margin-left: 90upx;
  border-bottom: 1upx solid #D8D8D8;
  padding-bottom: 30upx;
  margin-top: 10upx;
}

.comment-desc {
  width: 100%;
  box-sizing: border-box;
  font-size: 41upx;
  color: #333;
}

.comment-set {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16upx;
}

.comment-date {
  font-size: 32upx;
  color: #999999;
}

.comment-give-the-thumbs-up {
  display: flex;
  align-items: center;
}

.comment-give-the-thumbs-up image {
  width: 44upx;
  height: 52upx;
  margin-right: 8upx;
}

.user-comment-input-fixed {
  position: fixed;
  padding-bottom: env(safe-area-inset-bottom);
  bottom: 0;
  left: 0;
  z-index: 11;
  background-color: #fff;
}

.send {
  width: 150upx;
  height: 78upx;
  background-color: #61BD7F;
  line-height: 80upx;
  border-radius: 20upx;
  text-align: center;
  overflow: hidden;
  transition: all .3s linear;
  font-size: 32upx;
  color: #fff;
  margin-left: 0upx;
}

.del {
  color: red;
  margin-left: 30upx;
  z-index: 10;
}

.user-username {
  font-size: 34upx;
  color: #666666;
  position: relative;
  flex: 1;

  .edit {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0%, -50%);
    color: #666666;
    font-size: 28upx;
  }
}

.input-box {
  width: 100%;
  display: flex;
  align-items: center;

  .icon {
    width: 54upx;
    height: 54upx;
    margin-right: 30upx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .textarea-box {
    border-radius: 49upx;
  }
}

.button-box {
  width: 100%;
  height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;

  .icon {
    margin-left: auto;
    margin-right: 30upx;
  }
}

.update-box {
  width: 100%;
  height: 200upx;
  position: absolute;
  left: 0;
  top: -200upx;
  display: flex;
  justify-content: flex-end;
}

.update-list {
  width: fit-content;
  height: 200upx;
  background-color: #fff;
  border-radius: 8upx 8upx 0 8upx;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 20upx;
  box-shadow: 0 2upx 4upx 0 rgba(0, 0, 0, 0.3);
}

.update-item {
  width: 160upx;
  height: 160upx;
  border-radius: 8upx;
  position: relative;
  //background-color: #0A98D5;
  margin-right: 10upx;

  image {
    width: 100%;
    height: 100%;
  }

  .del {
    position: absolute;
    width: 42upx;
    height: 42upx;
    background-color: red;
    top: -20upx;
    right: -20upx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.zhezhao {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(0, 0, 0, .4);
  z-index: 10;
}

.image-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-count: 3;
  column-gap: 25upx;
  margin-top: 12upx;

  .image-item {
    width: 174upx;
    height: 174upx;
    background-color: #D8D8D8;
    border: 1upx solid #979797;
    margin-bottom: 10upx;
    position: relative;

    image {
      width: 100%;
      height: 100%;
    }
  }

}

.video-play {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 62upx;
    height: 62upx;
  }
}

.user-badge {
  display: flex;
}

.type-details {
  width: 100%;
  background-color: red;
  //overflow: hidden;
}

.type-details .comment-box {
}

.type-details .comment-list {
}

.class-msg {
  height: 40upx;
  position: relative;
  width: 400upx;
  box-sizing: border-box;
  margin-left: 30upx;

  .text1 {
    line-height: 40upx;
    position: absolute;
    font-size: 42upx;
    color: #333;
    font-weight: 600;
    z-index: 2;
    top: 0;
    left: 0;
  }

  .class-msg-xian {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0upx;
    width: 118upx;
    height: 8upx;
    background: linear-gradient(to right, #54B174 0%, #fff 100%);
  }
}

.user-comment-input-details {
  width: 100% !important;
  position: fixed !important;
  bottom: env(safe-area-inset-bottom);
  left: 0 !important;
  z-index: 100 !important;
}
</style>
